<template>
  <div class="rate">
    <div class="left">
      <p class="fir">4.7</p>
      <p class="mid">综合评价</p>
      <span class="last">高于周边商家好多好多</span>
    </div>
    <div class="right">
      <div class="fir">
        <span>服务态度</span>
          <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
      </div>
      <div class="mid">
          <span>菜品评价</span>
          <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
      </div>
      <div class="bot">
          <span>送达时间</span>
          <span class="min">分钟</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Rate } from "element-ui";
export default {
  components: {
    "el-rate": Rate,
  },
  data() {
    return {
      value: 4.6,
    };
  },
};
</script>

<style scoped lang="less">
.rate {
  display: flex;
  padding: 20px 20px 20px 40px;
  background-color: #fff;
  border-top: 2px solid #eee;
  .left {
    width: 50%;
    text-align: center;
    .fir {
      font-size: 180%;
      font-weight: bold;
      color: orangered;
    }
    .mid {
      padding: 10px 0;
      color: #333;
    }
    .last {
      font-size: 50%;
      color: grey;
    }
  }
  .right {
    flex: 1;
    div{
        display: flex;
        align-items: center;
        span{
            margin-right: 10px;
        }
        .min{
            font-size: 50%;
            color: grey;
        }
    }
    .mid{
        padding: 10px 0;
    }
    div /deep/ .el-rate__icon{
        font-size: 12px;
        margin: 0;
        
    }
  }
}
</style>

